<template>
  <div>
    <!-- <el-button
      v-if="isTrue"
      plain
      style="position: absolute"
      type="single-number"
      class="disabledBtn"
      disabled
    >
      选择
    </el-button> -->
    <el-button
      @click="clickBtn"
      plain
      style="position: absolute"
      type="single-number"
    >
      选择
    </el-button>
    <el-dialog
      :visible.sync="dialogTableVisibletextarea"
      custom-class="sorting-code-number"
      maxHeight="null"
      title="选择结算单"
      width="990px"
    >
      <div class="el-dialog__body-header">
        <span class="title"></span>
        <el-search
          :formProp="formData"
          :showIndex="showIndex"
          @change="change"
          @search="search"
          placement="bottom-start"
          width="380px"
        >
          <template slot="search">
            <el-input
              clearable
              placeholder="请输入结算单名称"
              searchLabel="结算单名称"
              v-model="formData.settlementName"
              @blur="handleTrim('settlementName')"
            ></el-input>
            <el-input
              clearable
              placeholder="请输入结算单编号"
              searchLabel="结算单编号"
              v-model="formData.settlementCode"
              @blur="handleTrim('settlementCode')"
            ></el-input>
            <el-input
              clearable
              placeholder="请输入合同编号"
              searchLabel="合同编号"
              v-model="formData.contractCode"
              @blur="handleTrim('contractCode')"
            ></el-input>
            <el-input
              clearable
              placeholder="请输入填报单位"
              searchLabel="填报单位"
              v-model="formData.reportInOrgName"
              @blur="handleTrim('reportInOrgName')"
            ></el-input>
            <el-input
              clearable
              placeholder="请输入供应商"
              searchLabel="供应商"
              v-model="formData.supplierName"
              @blur="handleTrim('supplierName')"
            ></el-input>
          </template>
        </el-search>
      </div>
      <div class="el-dialog__body-bodys">
        <div class="bodys-right">
          <el-table
            :data="tableData"
            :fit="true"
            :lineClamp="lineClampBody"
            maxHeight="390"
            style="width: 950px"
          >
            <el-table-column label="序号" width="50">
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <template v-for="(table, index) in unfixedTableThead">
              <el-table-column
                :fixed="table.fixed || false"
                :key="index"
                :type="table.type"
                :label="table.label"
                :align="table.align || 'left'"
                :header-align="table.headerAlign || 'left'"
                :min-width="table.width"
                :prop="table.prop"
                :show-overflow-tooltip="true"
                border="true"
              >
              </el-table-column>
            </template>
            <el-table-column label="操作" width="70">
              <template slot-scope="scope" style="margin-top: -11px">
                <el-button
                  :class="scope.row.button === false ? '' : 'checked'"
                  @click="handleClick(scope.row)"
                  plain
                  size="mini"
                  type="single-number-filleted"
                  >{{ scope.row.button === false ? "选择" : "已选择" }}
                </el-button>
                <!-- <el-button @click="handleClick(scope.row)" plain type="single-number">{{ scope.row.button === false ? "选择" : "已选择"}}</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <div class="table-footer" style="height: 30px">
            <div class="ccui-table-footer">
              <div id="ccui-paging">
                <el-pagination
                  :current-page="pageNoCode"
                  :page-size="pageSizeCode"
                  :pager-count="5"
                  :pagesize="pagesize"
                  :total="totalNum"
                  @addCurrentPage="internalCurrentPage"
                  @current-change="handleCurrentChange"
                  @next-click="handleNext"
                  @prev-click="handlePrev"
                  @size-change="handleSizeChange"
                  background
                  layout="total, prev, pager, next, jumper"
                  next-text="下一页 >"
                  popper-class="ccui-paging-page-size-popper"
                  prev-text="< 上一页"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="dialog-footer" slot="footer">
        <el-button
          @click="dialogTableVisibletextarea = false"
          size="mini"
          type="default-mini"
          >取 消
        </el-button>
        <el-button
          @click="inventoryConfirm"
          size="mini"
          type="primary-font-mini"
          >确 定
        </el-button>
      </div> -->
    </el-dialog>
  </div>
</template>

<script>
import { listSettlementPage } from "./api";
import { setSessionItem, getSessionItem } from "@/basa/utils";

export default {
  props: {
    reportInOrgId: {
      type: Number
    },
    isTrue: {
      type: Boolean
    }
  },
  data() {
    return {
      showIndex: 0,
      lineClampBody: true,
      tableData: [],
      searchData: [],
      treeProps: {
        label: "name",
        children: "zones",
        isLeaf: "leaf"
      },
      dialogTableVisibletextarea: false,
      formData: {
        settlementName: "", //结算单名称
        storageCode: "", // 结算单编号
        storageName: "", // 合同编号
        categoryName: "", // 填报单位
        supplierName: "", // 供应商
        reportInOrgName: ""
      },
      textarea: "",
      formLabelWidth: "120px",
      pageSizeCode: 5,
      pageNoCode: 1,
      present: "",
      TableData: "",
      total: 0,
      totalNum: 0,
      lastTime: {
        button: false
      },
      pagesize: [10],
      unfixedTableThead: [
        {
          label: "结算单编号",
          prop: "settlementCode",
          width: "90"
        },
        {
          label: "结算单名称",
          prop: "settlementName",
          width: "90"
        },
        {
          label: "填报单位",
          prop: "reportInOrgName"
        },
        {
          label: "合同编号",
          prop: "contractCode"
        },
        {
          label: "合同名称",
          prop: "contractName"
        },
        {
          label: "供应商",
          prop: "supplierName"
        },
        {
          label: "结算数量",
          prop: "currSetCountBackups"
        },
        {
          label: "结算金额",
          prop: "currSetMoneyBackups"
        }
        // {
        //   label: "合同数量",
        //   prop: "contractCount"
        // },
        // {
        //   label: "含税金额",
        //   prop: "moneyWithTax"
        // }
      ]
    };
  },
  created() {},
  methods: {
    clickBtn() {
      if (this.reportInOrgId && this.reportInOrgId != "") {
        this.dialogTableVisibletextarea = true;
        this.listConSupPage();
      } else {
        this.$message({
          message: "请先选择填报单位",
          type: "error",
          showClose: true,
          ccuiCustom: true
        });
      }
    },
    inventoryConfirm() {
      this.dialogTableVisibletextarea = false;
      // alert(JSON.stringify(this.TableData));
      this.$emit("inventoryConfirm", this.TableData);
    },
    listConSupPage(reqObj) {
      console.log(reqObj);
      let obj = {};
      obj = typeof reqObj == "object" ? reqObj : obj;
      obj.pageNo = this.pageNoCode;
      obj.pageSize = 5;
      obj.settlementStatus = "5";
      obj.reportInOrgId = this.reportInOrgId;
      listSettlementPage(obj).then(res => {
        this.TableData = "";
        this.tableData = res.data.data.rows;
        this.totalNum = res.data.data.recordsTotal;
        this.total = res.data.data.total;
        this.pageNoCode = res.data.data.pageNo; // 当前页
        this.tableData.forEach(e => {
          e.currSetCountBackups = (+e.currSetCount).toFixed(3);
          e.currSetMoneyBackups = (+e.currSetMoney).toFixed(2);
          e.button = false;
          if (this.TableData.id === e.id) {
            e.button = true;
          }
        });
      });
    },
    handleClick(val) {
      this.TableData = val;
      val.button = true;
      if (val.id !== this.lastTime.id) {
        this.lastTime.button = false;
        this.lastTime = val;
      }
      this.tableData = [...this.tableData];
      this.dialogTableVisibletextarea = false;
      this.$emit("inventoryConfirm", this.TableData);
    },
    handleSizeChange(val) {
      this.pageNoCode = 1;
      if (val !== "none") {
        this.pageSizeCode = val;
        setSessionItem("pageSize", this.tableName, val);
      }
      this.getList(this.formDataSearch);
    },
    handleNodeClick(val) {
      this.$refs.tree.setCheckedKeys([]);
      this.$refs.tree.setCheckedKeys([val.id]);
    },
    handleCurrentChange(val) {
      let searchFormData = getSessionItem("pageNo", this.tableName) || {};
      setSessionItem("pageNo", this.tableName, {
        pageNo: val,
        searchForm: searchFormData.searchForm || {}
      });
      this.formDataSearch = {
        ...this.formDataSearch,
        ...searchFormData.searchForm
      };
      // 跳转翻页都会调这个方法
      this.pageNoCode = val;
      this.listConSupPage(this.formDataSearch);
    },
    internalCurrentPage(val) {
      val = 10;
    },
    handlePrev() {},
    handleNext() {},
    handleGoPage() {},
    search(searchData) {
      this.pageNoCode = 1;
      this.formDataSearch = JSON.parse(JSON.stringify(searchData));
      this.localSearchData = JSON.parse(JSON.stringify(searchData));
      setSessionItem("pageNo", this.tableName, {
        pageNo: this.pageNoCode,
        searchForm: this.localSearchData
      });
      console.log("121212121", this.formDataSearch);
      this.listConSupPage(this.formDataSearch);
    },
    change(index, key, value) {
      this.showIndex = index;
    },
    // input 输入框去掉前后空格
    handleTrim(key) {
      this.$set(
        this.formData,
        key,
        this.formData[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-searchs-right > .el-input {
  width: 200px;
}
/deep/ .disabledBtn {
  // border: 1px solid #999 !important;
  span {
    color: #999 !important;
  }
}
</style>
